<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2020-2023 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div *ngIf="isEmpty()" style="color: dimgray; text-align: center">
    <span>No properties defined <br> for this Node Template.</span>
</div>

<table class="table table-border--grey table-sm body-table" *ngIf="!isEmpty()">
    <tr>
        <th>
            Key
        </th>
        <th>
            Values
        </th>
    <tr *ngFor="let key of nodeProperties | keysPipe; let i = index; trackBy: trackByFn">
        <td class="">{{key.key}}</td>
        <td class="">
                <textarea
                    style="width:100%; overflow-y: scroll;"
                    rows="1"
                    placeholder="Edit your value here."
                    required
                    [disabled]="readonly"
                    name="{{key.key}}"
                    value="{{key.value}}"
                    (keyup)="keyup($event.target)"
                    (blur)="keyup($event.target)"
                    (focus)="keyup($event.target)">
                </textarea>
        </td>
    </tr>
</table>
